<template>
    <div>
        <list>
            <refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown"
                     :display="refreshing ? 'show' : 'hide'">
                <text class="indicator-text">Refreshing ...</text>
                <loading-indicator class="indicator"></loading-indicator>
            </refresh>
            <cell>
                <div class="report_content_item" @click="toDetail(item)" v-for="item in selectPaymentRPForm">
                    <text class="report_content_item_title">{{item.paymentPluginName}}</text>
                    <div class="report_content_item_right">
						 <text class="report_content_item_icon" v-if="item.quantity!=null">({{item.quantity}}张)</text>
                        <text class="report_content_item_price">¥{{item.amount | price}}</text>
                        <text class="report_content_item_icon">&#xe61f;</text>
                    </div>
                </div>
            </cell>
            <loading v-if="selectPaymentRPForm.length>=10" class="loading" @loading="onloading" :display="loadinging ? 'show' : 'hide'">
                <text class="indicator-text">Loading ...</text>
                <loading-indicator class="indicator"></loading-indicator>
            </loading>
        </list>
    </div>
</template>

<script>
    const modal = weex.requireModule('modal')
    import {
        selectPaymentRP
    } from '@/api/apiReport'
    export default {
        data() {
            return {
                selectPaymentRPForm: [],
                refreshing: false,
                loadinging: false,
                pageNum: 1,
                pageSize: 20,
            }
        },
        created() {
            this.initIconFont()
            this.selectPaymentRPClick()
        },
        props:[
            'startDate','endDate'
        ],
        filters: {
            price(value) {
                var toFixedNum = Number(value).toFixed(3);
                var realVal = toFixedNum.substring(0, toFixedNum.toString().length - 1);
                return realVal;
            },
            number(value) {
                var toFixedNum = Number(value).toFixed(0);
                return toFixedNum;
            }
        },
        methods: {
			toDetail(data){
				console.info(data)
				eeui.openPage({
				    url: 'root://pages/report/collectionDetail.js',
					params:data.paymentPluginId,
				    statusBarType: 'immersion',
				    statusBarStyle: false
				}, result => {
				
				});
			},
            selectPaymentRPClick() {
                var _this = this
                console.log('加载了')
                eeui.loading();
                console.log(_this.startDate)
                console.log(_this.endDate)
                selectPaymentRP({
                    pageNum: _this.pageNum,
                    pageSize: _this.pageSize,
                    startDate:_this.startDate,
                    endDate:_this.endDate
                }).then(res => {
                    console.log(res)
                    res.data.data.forEach(function (item) {
                        _this.selectPaymentRPForm.push(item)
                    })
                    eeui.loadingClose();
                }).catch(err => {
                    console.log(err);
                    eeui.loadingClose();
                });
            },
            onrefresh(event) {
                var _this = this
                // modal.toast({message: 'Refreshing', duration: 1})
                this.refreshing = true
                setTimeout(() => {
                    _this.pageNum = 1;
                    _this.selectPaymentRPForm = []
                    _this.selectPaymentRPClick()
                    this.refreshing = false
                }, 2000)
            },
            paymentClick(){
                var _this = this
                _this.selectPaymentRPForm = []
                _this.selectPaymentRPClick()
            },
            onpullingdown(event) {
                console.log("dy: " + event.dy)
                console.log("pullingDistance: " + event.pullingDistance)
                console.log("viewHeight: " + event.viewHeight)
                console.log("type: " + event.type)
            },
            onloading (event) {
                var _this = this
                // modal.toast({ message: 'Loading', duration: 1 })
                this.loadinging = true
                setTimeout(() => {
                    _this.pageNum = this.pageNum + 1;
                    _this.selectPaymentRPClick()
                    this.loadinging = false
                }, 2000)
            },
        }
    }
</script>

<style scoped>
    .report_content_item {
        width: 700px;
        background-color: white;
        border-radius: 10px;
        margin-left: 25px;
        position: relative;
        margin-bottom: 25px;
        display: flex;
        flex-direction: row;
        align-items: center;
        box-sizing: border-box;
        justify-content: space-between;
        padding-top: 30px;
        padding-bottom: 30px;
        padding-left: 30px;
        padding-right: 20px;
    }

    .report_content_item_title {
        font-size: 32px;
    }

    .report_content_item_right {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .report_content_item_price {
        font-size: 36px;
    }

    .report_content_item_unit {
        font-size: 36px;
        color: rgba(0, 0, 0, 0.4);
    }

    .report_content_item_icon {
        font-family: iconfont2;
        font-size: 32px;
        color: rgba(0, 0, 0, 0.2);
        margin-left: 10px;
    }
    .refresh {
        width: 750px;
        display: -ms-flex;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        -webkit-align-items: center;
        -webkit-box-align: center;
        align-items: center;
    }

    .indicator-text {
        color: #888888;
        font-size: 42px;
        text-align: center;
    }

    .indicator {
        margin-top: 16px;
        height: 40px;
        width: 40px;
        color: blue;
    }
    .loading {
        width: 750px;
        display: -ms-flex;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        -webkit-align-items: center;
        -webkit-box-align: center;
        align-items: center;
    }
</style>
